{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/js/Swiper-4.0.7/swiper.min.css" />
<link rel="stylesheet" href="__STATIC__/mobile/default/css/index.css" />

<style>
  .store-main {
    padding: 10px 10px 0;
  }

  .nav {
    text-align: center;
    font-size: 16px;
    background-color: #fff;
  }

  .nav-pic {
    width: 56px;
    height: 56px;
    overflow: hidden;
  }

  .van-grid-item__content {
    padding: 10px 8px;
  }


  .el-icon-phone {
    color: green;
    font-size: 20px;
  }

  .el-icon-location-information {
    color: #ff6884;
    font-size: 20px;
  }

  .store {
    padding: 10px 12px;
  }

  .store-cover {
    border-radius: 4px;
    overflow: hidden;
  }

  .store-content {
    padding: 5px 10px;
  }

  .van-panel__header {
    display: none;
  }

  .store-tab {
    padding: 10px;
    margin: 0 16px;
    background-color: #fff;
    min-height: 200px;
  }

  .goodslist li {
    width: 100%;
  }

  .goodslist .checkbox {
    padding: 0;
  }

  img {
    max-width: 100%;
    max-height: 100%;
  }

  .swiper1 {
    height: 2rem;
    text-align: center;
  }

  .van-cell-group {
    border: 1px dashed #666;
  }

  .van-panel__footer {
    border-top: 1px dashed #666;
  }

  .van-panel__footer .flex-item+.flex-item {
    border-left: 1px dashed #666;
  }
</style>
{/block}
{block name="main" }
{eq name="$tipsubscribe" value="1"}
<div class="topTips">
  <div class="flexBox">
    <div class="cell_bd"><img src="__STATIC__/mobile/default/images//APPLOGO.png" alt=""><span
        class="fs28 color_w">您当前还未关注微信公众号</span></div>
    <div class="cell_ft">
      <p class="fs28 fw_b color_r">立即关注</p><img src="__STATIC__/mobile/default/images/close_w.png" alt="">
    </div>
  </div>
</div>
<!-- 扫码关注 -->
<div class="model">
  <div class="modelBG closeModel"></div>
  <div class="medelCanten">
    <div class="codeBox">
      <img src="{$setting.weixin_qrcode}" alt="">
      <span class="fs30 color_3 fw_b">长按二维码识别关注</span>
    </div>
    <img src="__STATIC__/mobile/default/images/close_wy.png" alt="" class="closeimg closeModel">
  </div>
</div>
{/eq}

<div class="page-bd" id="app">
  <div class="flex-center bg">
    <div class="van-search pr-0">
      <div>
        <a href="./address.html?city={$city}" class="flex-center">{$city | default='全国'}<van-icon name="arrow-down"></van-icon></a>
      </van-cell>
    </div>
  </div>
  <a href="{:url('store/search')}" class="flex-item">
    <van-search placeholder="请输入搜索关键词"></van-search>
  </a>
</div>
<div class="store-main">
  <!-- 页面内容-->
  <div class="swiper-container swiper1" id="swiper01" style="background:#CCC;">
    <div class="swiper-wrapper">
      {volist name="slideList" id="slide" }
      <a href="{$slide.url}" class="swiper-slide"><img data-src="{$slide.imgurl}" class="swiper-lazy" />
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </a>
      {/volist}
    </div>

    <div class="swiper-pagination pagination1"></div>
    <!-- <a href="{:url('store/search')}" class="selech"><img src="__STATIC__/mobile/default/images/index_01.png"
        class="lazy" alt="" /><span class="fs32 color_w">请输入店铺</span></a> -->
  </div>
  <!-- <div>
      <a href="{:url('shop/store/address')}">查询</a>
    </div> -->
  <!-- 功能入口-->
  {notempty name="navMenuList"}
  <van-grid :column-num="4" class="nav">
    {volist name="navMenuList" id="nav" }
    <van-grid-item>
      <a href="{$nav.url}">
        <van-image src="{$nav.imgurl}" class="nav-pic" round></van-image>
        <div class="fs26 color_3">{$nav.title}</div>
      </a>
    </van-grid-item>
    {/volist}
  </van-grid>
  <!-- <div class="girdBox ">
      <div class="gird">
        <div class="row">
          {volist name="navMenuList" id="nav" }
          {if condition="$i==5"}
        </div>
        <div class="row">
          {/if}
          <a href="{$nav.url}" class="box">
            <div><img src="{$nav.imgurl}" alt="" /></div>
            <span class="fs26 color_3">{$nav.title}</span>
          </a>
  
          {/volist}
        </div>
      </div>
    </div> -->
  {/notempty}
  <!-- 分类 -->
  <div class="hot-title flex">
    <div class="flex-item">热门功能</div>
    <!-- <el-link type="primary" href="{:url('goods/index',['is_best'=>1])}">查看更多店铺>></el-link> -->
  </div>

  {volist name="list_" id="goods" }
  <van-panel class="mb-2">
    <a href="{:url('store/info',['store_id'=>$goods['store_id']])}" class="store flex-center">
      <van-image width="1rem" height="1rem" class="store-cover" src="{$goods.store_img}"></van-image>
      <div class="store-content flex-item">
        <div>{$goods.store_name}</div>
        <div>联系方式: {$goods.store_phone}</div>
        <div>联系地址: {$goods.store_address}</div>
      </div>
    </a>
    <div slot="footer">
      <div class="flex-center">
        <a href="tel:{$goods.store_phone}" class="flex-item flex-center">
          <i class="el-icon-phone pr-1"></i>
          一键拨打
        </a>
        <a class="flex-item flex-center"
          href="http://api.map.baidu.com/marker?location={$goods.lat},{$goods.lng}&title=商家位置&content={$goods.store_name}&output=html">
          <i class="el-icon-location-information pr-1"></i>
          地图导航
        </a>
      </div>
    </div>
  </van-panel>
  {/volist}

</div>

<!-- 猜你喜欢 -->
<!--        <div class="youLike">-->
<!--            <div class="title">-->
<!--                <div class="left fs36 color_3 fw_b">猜你喜欢</div>-->
<!--                <a href="{:url('goods/index',['is_best'=>1])}" class="right"><span class="fs26 color_9">更多</span><img src="__STATIC__/mobile/default/images/rightIcon.png" alt=""></a>-->
<!--            </div>-->
<!--            <div class="list">-->
<!--                <div class="box">-->
<!--                	{volist name="bestGoods" id="goods" }-->
<!--                    <a href="{:url('goods/info',['id'=>$goods['goods_id']])}">-->
<!--                        <img  src="__STATIC__/mobile/default/images/loading.svg" data-original="{$goods.goods_thumb}" class="lazy" alt="">-->
<!--                        <span class="fs30 color_3">{$goods.goods_name}</span>-->
<!--                        <div class="color_r fs24 num"><p class="fw_b fm_p">￥</p><em class="fs36">{$goods.exp_price[0]}</em><p>.{$goods.exp_price[1]}</p></div>-->
<!--                    </a>-->
<!--                    {/volist}-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
</div>
{include file="layouts@bottom" /}
</div>

{/block}
{block name="footer"}
<script src="__STATIC__/built/pages/store.js"></script>
<script src="__STATIC__/mobile/default/js/Swiper-4.0.7/swiper.min.js"></script>
<script>
  $(function () {
    swiper1 = createSwiper(1);
    swiper2 = createSwiper(2);
    $('.topTips .cell_ft p').on('click', function () {
      $('.model').show()
    })
    $('.topTips .cell_ft img').on('click', function () {
      $('.topTips').hide()
    })
    $('.closeModel').on('click', function () {
      $('.model').hide()
    })

  });

  function createSwiper(index) {
    var swiper = new Swiper(".swiper" + index, {
      pagination: {
        el: ".pagination" + index
      },
      paginationClickable: true,
      observer: true,
      observeParents: true,
      loop: true,
      lazy: { loadPrevNext: true },
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      onSlideChangeEnd: function (swiper) {
        swiper.update(); //swiper更新
      }
    });
    return swiper;
  }
</script>
{/block}